<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单实例1样式优化</title>
<!--    <link rel="stylesheet" type="text/css" href="../static/css/form2.css">-->
    <style>
        input[type=text],select {
            width: 90%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #04befe;//#ccc
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type=password]{
            width: 90%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #04befe;
            border-radius: 4px;
            box-sizing: border-box;
        }

        textarea{
            width: 100%;
            padding: 12px 20px 10px 0;
            margin: 8px 0 10px 0;
            display: inline-block;
            border: 1px solid #04befe;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type=submit]{
            width: 100%;
            height: 50px;
            background-color: #4CAF50;
            color: white;
        }
        input[type=submit]:hover{
            background-color: #45a049;
        }
        div {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }
    </style>
</head>
<body>
<div style="margin:100px 450px 100px 450px">
    <form action="" method="post">
        <!-- 账号  文本输入框-->
        <span for="name">账号:</span>
        <input type="text" id="name" name="name" required>
        <br>

        <!-- 密码 文本输入框 -->
        <span>密码:</span>
        <input type="password" id="password" name="password">
        <br>

        <!-- 性别 单选按钮 -->
        <span>性别:</span>
        <input type="radio" id="male" name="sex" value="男" checked>
        <label for="male">男</label>
        <input type="radio" id="female" name="sex" value="female">
        <label for="female">女</label>
        <br>

        <!-- 兴趣爱好 复选框 -->
        <span for="hobby">爱好:</span>
        <input type="checkbox"  name="hobby" value="篮球" checked>篮球
        <input type="checkbox"  name="hobby" value="足球" >足球
        <input type="checkbox"  name="hobby" value="排球" >排球
        <br>

        <!-- 国籍 下拉框 -->
        <span for="country">国家:</span>
        <select id="country" name="country">
            <option value="中国">中国</option>
            <option value="美国">美国</option>
            <option value="韩国">韩国</option>
        </select>
        <br>

        <!-- 个人简介 下拉框 -->
        <div style="margin-left: 0;padding: 0">个人简介:</div>
            <textarea rows="10" cols="30">
            个人简介
            </textarea>

        <br>

        <!-- 提交按钮 -->
        <input type="submit" name="submit" value="按钮">
        <br>
    </form>
</div>
</body>
</html>